<template>
   <div>
       <div id="container" ref="container"></div>
   </div>
</template>

<script lang='ts'>
    import { computed, getCurrentInstance, ref, watch,onMounted,defineComponent, toRaw } from 'vue';
    import { templateRef } from '@vueuse/core';
    let $THREE = window.THREE;
    export default defineComponent({
        props:{},
        setup(props,context){
            let {ctx}:any = getCurrentInstance();

                const container = templateRef<any>('container');
                const camera = ref<any>(null);
                const renderer = ref<any>(null);
                const mesh = ref<any>(null);
                const mesh2 = ref<any>(null);
                const scene = ref<any>(new $THREE.Scene());
                const directionalLight = ref<any>();
                const pointLight = ref<any>(); 
                const ambientLight = ref<any>();

                const init = ()=>{
                    camera.value = new $THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
                    camera.value.position.z = 1200;

                    scene.value.background = new $THREE.Color( 0x111111 );

                    // LIGHTS

                    ambientLight.value = new $THREE.AmbientLight( 0x444444 );
                    scene.value.add(toRaw(ambientLight.value));

                    pointLight.value = new $THREE.PointLight( 0xffffff, 1.25, 1000 );
                    pointLight.value.position.set( 0, 0, 600 );

                    scene.value.add(toRaw(pointLight.value));

                    directionalLight.value = new $THREE.DirectionalLight( 0xffffff );
                    directionalLight.value.position.set( 1, - 0.5, - 1 );
                    scene.value.add(toRaw(directionalLight.value));

                    let bump = $THREE.ImageUtils.loadTexture('/bump.jpg');
                    let normal = $THREE.ImageUtils.loadTexture('/bump.jpg');
                    let texture = new $THREE.TextureLoader().load('/crate.gif');

                    // const geometry = new $THREE.BoxGeometry( 200, 200, 200 );
                    // let material = new $THREE.MeshPhongMaterial( { map: texture,bumpMap:bump,bumpScale:3 } );

                    const geometry = new $THREE.BoxGeometry( 200, 200, 200 );
                    const geometry2 = new $THREE.BoxGeometry( 200, 200, 200 );
                    // let normal = new $THREE.Texture($THREE.ImageUtils.getNormalMap());
                    // normal.needsUpdate = true;
                    // cub1.material.normalMap = normal;
                    let material = new $THREE.MeshPhongMaterial( { map: texture,bumpMap:bump,bumpScale:3 } );
                    let material2 = new $THREE.MeshPhongMaterial( { map: texture,normalMap:normal } );
                    let _meshobj = new $THREE.Mesh(geometry, material);
                    let _meshobj2 = new $THREE.Mesh(geometry2,material2);
                    _meshobj2.translateX(300);
                    mesh.value = _meshobj;
                    mesh2.value = _meshobj2;
                    scene.value.add(toRaw(mesh.value));
                    scene.value.add(toRaw(mesh2.value));
                    renderer.value = new $THREE.WebGLRenderer({ antialias: true } );
                    renderer.value.setPixelRatio( window.devicePixelRatio );
                    renderer.value.shadowMap.enabled = true;
				    renderer.value.setSize( window.innerWidth, window.innerHeight );
                    container.value.appendChild( renderer.value.domElement );
                    let controls = new $THREE.OrbitControls(camera.value, renderer.value.domElement);
                    loop();
                }

                const loop =()=>{
                    requestAnimationFrame(loop);
                    renderer.value.render(toRaw(scene.value), camera.value);
                }

            onMounted(()=>{
                init();

            })
            return{
            }
        },
        components:{
        }
    })
</script>

<style scoped>
</style>
